<template>
	<!-- 结算卡详情 -->
	<view class="bankcard-info-box">
		<view class="bankcard-info-content-box">
			<image class="bankcard-info-content-logo" :src="bankCardInfo.bankPicUrl" mode="aspectFit"></image>
			<text class="bankcard-info-content-name">{{bankCardInfo.bankName}}</text>
			<text class="bankcard-info-content-type">储蓄卡</text>
			<text class="bankcard-info-content-code">{{cardNo}}</text>
		</view>
		<view class="bankcard-info-bottom-box" v-if="bankCardInfo.useFlag != '1'">
			<view class="submit-btn set-btn" @tap="setDefaultBankCardAction">设置默认结算卡</view>
			<text @tap="unBindAction">解绑</text>
		</view>
	</view>
</template>

<script setup>
	import { submitMerchantReport,getBankCardList ,unBindBankCard} from '@/config/api.js'
	const props = defineProps()
	let bankCardInfo = props
	//银行卡号
	const cardNo = uni.$tools.formatBankCardNo(bankCardInfo.cardNo)
	//设置默认结算卡
	const setDefaultBankCardAction = ()=>{
		if(uni.$u.test.isEmpty(bankCardInfo)){
			return
		}
		uni.$pop.show({
			type:'alert',
			config:{
				title:'温馨提示',
				desc:'确认要设置该卡为默认结算卡吗？',
				buttons:['取消','确认']
			}
		},(value)=>{
			if(value == '确认'){
				submitSetDefaultBankCard()
			}
		})
	}
	//确认提交设置默认结算卡
	const submitSetDefaultBankCard = ()=>{
		let params = {}
		params.settleId = bankCardInfo.id
		params.uptType = '1'
		submitMerchantReport().then(res=>{
			getBankCardList()
		}).catch(err=>{
		})
	}
	//获取结算卡列表
	const getBankCardListData = () => {
		uni.$tools.showLoading('提交设置中，请稍后...')
		getBankCardList().then(res => {
			uni.$tools.hideLoading()
			let isSuccess = false
			const dataList = res.result
			for (let item of dataList) {
				if(item.useFlag == '1' && bankCardInfo.id == item.id){
					isSuccess = true
				}
			}
			showSetResult()
		}).catch(err => {
			uni.$tools.hideLoading()
		})
	}
	//显示设置结果提示
	const showSetResult = (isSuccess)=>{
		uni.$pop.show({
			type:'alert',
			config:{
				title:isSuccess ? '设置成功' : '温馨提示',
				desc:isSuccess ? '设置成功，新交易的订单将结算到该结算卡。' : '更改结算卡可能存在迟时生效或失败，具体结果以查询列表为准。',
				buttons:['我知道了']
			}
		},(value)=>{
			if(value == '我知道了'){
				uni.navigateBack()
			}
		})
	}
	//解绑结算卡
	const unBindAction = ()=>{
		if(uni.$u.test.isEmpty(bankCardInfo)){
			return
		}
		uni.$pop.show({
			type:'alert',
			config:{
				title:'解绑确认',
				desc:'确认要解绑该结算卡吗',
				buttons:['取消','确认']
			}
		},(value)=>{
			if(value == '确认'){
				submitUnBindBankCard()
			}
		})
	}
	//确认提交解绑结算卡
	const submitUnBindBankCard = ()=>{
		unBindBankCard({settleId:bankCardInfo.id}).then(res=>{
			uni.$pop.show({
				type:'alert',
				config:{
					title:'解绑成功',
					desc:'该结算卡已解绑成功',
					buttons:['我知道了']
				}
			},(value)=>{
				if(value == '我知道了'){
					uni.navigateBack()
				}
			})
		}).catch(err=>{ })
	}
</script>

<style lang="scss" scoped>
.bankcard-info-box{
	padding: 90rpx 30rpx;
	.bankcard-info-content-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		.bankcard-info-content-logo{
			width: 120rpx;
			height: 120rpx;
		}
		.bankcard-info-content-name{
			font-size: 32rpx;
			margin-top: 32rpx;
		}
		.bankcard-info-content-type{
			font-size: 24rpx;
			margin: 32rpx 0;
		}
		.bankcard-info-content-code{
			font-size: 28rpx;
		}
	}
	.bankcard-info-bottom-box{
		margin-top: 184rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: $xh-color-606266;
		font-size: 32rpx;
		.set-btn{
			width: 330rpx;
			margin-bottom: 32rpx;
		}
	}
}
</style>
